<template>
	<view class="page flex-col">

		<view class="block_2 flex-col">
			<view class='productList'>
				<view class='nav acea-row row-middle'>

					<view class='item' :class="navIndex==index?'navActive':''" @click='set_where(index)'
						v-for="(item,index) in navData" :key="index">
						{{item.tit}}
						<!-- <template v-if="item.tit=='价格'">
							<image v-if="price==1" src='../../static/images/up.png'></image>
							<image v-else-if="price==2" src='../../static/images/down.png'></image>
							<image v-else src='../../static/images/horn.png'></image>
						</template> -->

					</view>


				</view>
			</view>
			<view class="" style="height: 90rpx;">

			</view>

			<!-- 	<view class="tabs_1 flex-col justify-end">
				
				<view class="section_1 flex-row justify-between">
					<text class="text_5">销量</text>
					<text class="text_6">礼包</text>
					<text class="text_7">单品</text>
					<view class="image-text_1 flex-row justify-between">
						<text class="text-group_1">价格</text>
						<image class="icon_1" referrerpolicy="no-referrer"
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG697e88511719ebb1b5fa89329b13f4f4.png" />
					</view>
				</view>
				<view class="section_2 flex-row">
					<view class="block_3 flex-col"></view>
				</view>
			</view> -->
			<view class="box_1 flex-col justify-between">
				<view class="block_4 flex-col" v-for="(item,index) in list">
					<view class="box_2 flex-row">

						<image class="image_2" referrerpolicy="no-referrer" :src="item.image" />
						<!-- <image class="image_2" referrerpolicy="no-referrer"
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNGdde33c3238e3283dca88ff21fdd34bec.png" /> -->
						<view class="group_6 flex-col">
							<text class="text_8 line2">{{item.name}}</text>
							<view class="section_3 flex-row">
								<text class="text_9 bc">¥</text>
								<text class="text_10 bc">{{item.price}}</text>
								<button class="button_1 bgb flex-col" @click="onClick_1">
									<text class="text_11 bc">{{item.packageType}}</text>
								</button>
							</view>

							<view class="section_4 flex-row justify-between" @click="goPage(item.url)">
								<view class="index-coupon">
									<scroll-view scroll-x="true" class="index-coupon-view">
										<view class="index-coupon-msg" v-for="(items,index) in item.productImageList"
											:key="index">
											<image :src="items" mode=""></image>

										</view>
									</scroll-view>
								</view>
							</view>
						</view>

					</view>
					<view class="box_3 flex-row">
						<button class="button_2 bb flex-col" @click="goPage(item.url)">
							<text class="text_12">立即认养</text>
						</button>
					</view>
				</view>
			</view>

		</view>
		<home>
			
		</home>
	</view>
</template>
<script>
	import home from '@/components/home/index.vue'

	import {
		getAdoptionList
	} from "@/api/togeterRich/index.js"
	export default {
		components:{
			home
		},
		data() {
			return {
				list: [],
				navIndex: 0,
				navData: [{
						tit: '销量',
						num: 1
					},
					{
						tit: '礼包',
						num: 2
					},
					{
						tit: '单品',
						num: 3
					},
					{
						tit: '价格',
						num: 4
					}
				],
				price: 0,
				stock: 0,
				where: {
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					news: 0,
					page: 1,
					limit: 20,
					cid: 0,
				},
				constants: {},
				navDatas: {
					salesOrder: 'DES',
					single: '',
					priceOrder: ''
				},
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				// let data = {
				// 	...this.navDatas
				// }
				getAdoptionList(this.navDatas).then(res => {
					this.list = res.data.list
					console.log(res, 'ddd')
				})
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			set_where(e) {
				this.navIndex = e
				this.loadend = false;
				if (this.navIndex == 0) {
					this.navDatas = {
						salesOrder: 'DES',
						single: '',
						priceOrder: 'ASC'
					}

				} else if (this.navIndex == 1) {
					this.navDatas = {
						salesOrder: 'DES',
						single: false,
						priceOrder: 'ASC'
					}
				} else if (this.navIndex == 2) {
					this.navDatas = {
						salesOrder: 'DES',
						single: true,
						priceOrder: 'ASC'
					}
				} else {
					this.navDatas = {
						salesOrder: 'DES',
						single: '',
						priceOrder: 'ASC'
					}
				}
				this.init()
				// this.$set(this.where, 'page', 1);
				// this.get_product_list(true);
			},


		},
	};
</script>
<style lang="scss" scoped>
	@import 'com/index.css';
	@import '@/com/css/common.css';
	.bc{
		color: $maincolor !important;
	}
	.bgb{
		border: 2rpx solid $maincolor;
	}
	.bb{
		background: $maincolor;
	}
	.index-coupon {
		.index-coupon-view {
			white-space: nowrap;
			width: 440rpx;
		}

		width: 100%;
		height: 200rpx;

		.index-coupon-msg {

			display: inline-block;

			margin-right: 10px;

			image {
				width: 88rpx;
				height: 88rpx;
			}
		}
	}

	.navActive {
		color: $maincolor;
		border-bottom: 6rpx solid $maincolor;
	}

	.productList .nav {
		height: 86rpx;
		color: #454545;
		position: fixed;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;
		justify-content: space-between;
		top: 0;
		z-index: 9;
		padding: 0 20rpx;
	}

	.productList .nav .item {
		width: 10%;
		text-align: center;
		padding-bottom: 20rpx;


	}

	.productList .nav .item.font-color {
		font-weight: bold;
		color: $maincolor;
	}

	.productList .nav .item image {
		width: 15rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}

	/* @import './common.css';
@import './index.rpx.css'; */
</style>